<!--  -->
<template>
  <div class="">
    <el-form :inline="true" class="demo-form-inline" :model="categoryId" :disabled="showInfo">
      <el-form-item label="一级联动">
        <el-select v-model="categoryId.category1Id" placeholder="请选择" @change="reqCategory2">
          <el-option v-for="(c1, index) in category1" :key="c1.id" :label="c1.name" :value="c1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级联动">
        <el-select v-model="categoryId.category2Id" placeholder="请选择" @change="reqCategory3">
          <el-option v-for="(c2, index) in category2" :key="c2.id" :label="c2.name" :value="c2.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级联动">
        <el-select v-model="categoryId.category3Id" placeholder="请选择" >
          <el-option v-for="(c3, index) in category3" :key="c3.id" :label="c3.name" :value="c3.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { debounce } from 'lodash'
export default {
  name: 'ThreeCooperation',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  // 获取父组件传递过来的函数传值
  props: ['getCategoryId', 'showInfo'],
  data() {
    // 这里存放数据
    return {
      category1: [],
      category2: [],
      category3: [],
      categoryId: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      }
      // category3Id: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {
    // 一种深度监视的方法
    category3Id() {
      return this.categoryId.category3Id
    }
  },
  // 监控data中的数据变化
  watch: {
    // 一种深度监视的方法
    // category3Id(newVal, oldVal) {
    //   debounce(this.getCategoryId(this.categoryId), 200)
    // }
    category3Id() {
      // this.categoryId.category3Id = this.category3Id
      this.getCategoryId(this.categoryId)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getCategory1()
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 获取一级联动数据
    async getCategory1() {
      const result = await this.$API.threecooperation.getCategory1List()
      if (result.code === 200) {
        this.category1 = result.data
      }
    },
    // 获取二级联动数据
    async getCategory2(id) {
      const result = await this.$API.threecooperation.getCategory2List(id)
      if (result.code === 200) {
        this.category1 = result.data
      }
    },
    // 获取三级联动数据
    async getCategory3(id) {
      const result = await this.$API.threecooperation.getCategory3List(id)
      if (result.code === 200) {
        this.category1 = result.data
      }
    },
    // 数据改变的回调 - 获取2级联动信息
    async reqCategory2() {
      try {
        this.category2 = []
        this.category3 = []
        this.categoryId.category2Id = ''
        this.categoryId.category3Id = ''
        const result = await this.$API.threecooperation.getCategory2List(this.categoryId.category1Id)
        if (result.code === 200) {
          this.category2 = result.data
        }
      } catch (error) {
        // 不做处理先
      }
    },
    // 数据改变的回调 - 获取3级联动信息
    async reqCategory3() {
      try {
        this.category3 = []
        this.categoryId.category3Id = ''
        const result = await this.$API.threecooperation.getCategory3List(this.categoryId.category2Id)
        if (result.code === 200) {
          this.category3 = result.data
        }
      } catch (error) {
        // 不做处理先
      }
    }
    // 数据改变的回调 - 将数据传递给父组件 该方法弃用使用监视属性去实现了
    // getCategoryid() {
    //   this.categoryId.category3Id = this.category3Id
    //   // this.getCategoryId(this.categoryId)
    // }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
